<template>
	<view class="content">
		<u-sticky >
			<u-icon name="search" size="48" class="stickClass" label="筛选" @click="popupSearchPanel"></u-icon>
		</u-sticky>
		
		<view v-if="statisList.length>0"  style="padding-left: 16px; font-size: 13px; font-weight: bold; padding-top: 16px; padding-right: 16px;">
			<u-row :gutter="4">
				<u-col span="7">商品</u-col>
				<u-col span="3">数量</u-col>
			</u-row>
			
			<u-row :gutter="4" v-for="item in statisList" custom-style="font-weight: 400; font-size:12px; padding-top:16px;  border-bottom: 1px solid rgb(238,238,238); padding-right: 16px;">
				<u-col span="7">{{item.goodName}}</u-col>
				<u-col span="3">{{item.goodCount}}</u-col>
				
			</u-row>
		</view>
		
		<u-empty
				v-if="statisList.length===0"
		        mode="data"
		        text="统计为空,请选择日期查询"
				textSize="26"
				iconSize="108"
		>
		</u-empty>
		
		
		<u-popup :show="popupMenuShow" mode="right" customStyle="width:300px;" @close="closePopup"   >
			<u--form 
				class="formFontSzie"
				labelPosition="left"
				customStyle="margin-top: 24px;"	
				labelWidth="80px"
				:model="queryParams"
				labelStyle="{'fontSize':'10px'}"
				labelAlign="center"
			>
				
				<u-form-item label="开始日期">
					
					<u-search placeholder="开始日期" v-model="queryParams.chargerStartDate"  @click="toShowStartPicker" shape="square" :disabled="true"  searchIcon="calendar-fill" :showAction="false" ></u-search>
					<u-datetime-picker v-model="startPickerValue"  mode="date" :show="startCalendarShow" @close="startCalendarShow=false" @cancel="startCalendarShow=false" @confirm="startCalendarConfirm"></u-datetime-picker>
				</u-form-item>
				<u-form-item label="结束日期">
					<u-search placeholder="结束日期" v-model="queryParams.chargerEndDate"  @click="toShowEndPicker" shape="square" :disabled="true"  searchIcon="calendar-fill" :showAction="false" ></u-search>
					<u-datetime-picker v-model="endPickerValue"  mode="date" :show="endCalendarShow" @close="endCalendarShow=false" @cancel="endCalendarShow=false" @confirm="endCalendarConfirm"></u-datetime-picker>
				</u-form-item>
				
				<u-form-item>
					<u-button type="primary" text="查询" @click="execQuery"></u-button>
				</u-form-item>
				<u-form-item>
					<u-button type="warning" text="重置" @click="resetQuery"></u-button>
				</u-form-item>
				
			</u--form>
		</u-popup>
	</view>
</template>

<script>
	import {getPersonCheckOutStatis} from '@/api/inoutrecord.js'
	import { formatDateTime } from '../../common/utils';
	export default{
		data(){
			return {
				popupMenuShow:false,	
				startCalendarShow:false,
				endCalendarShow:false,
				dateRange:undefined,
				startPickerValue:formatDateTime(new Date(),"yyyy-MM-dd"),
				endPickerValue:formatDateTime(new Date(),"yyyy-MM-dd"),
				queryParams:{
					chargerStartDate:undefined,
					chargerEndDate:undefined,
					userOnly:"TRUE"
				},
				statisList:[]
			}
		},
		methods:{
			popupSearchPanel(){
				this.popupMenuShow=true;
			},
			closePopup(){
				this.popupMenuShow=false;
			},
			startCalendarConfirm(e){

				let selectedDate=new Date(e.value);
				let selectedStr=formatDateTime(selectedDate,"yyyy-MM-dd");
				
				this.queryParams.chargerStartDate=selectedStr;
				this.startCalendarShow=false;
			},
			toShowStartPicker(){
				this.startCalendarShow=true;
				
			},
			toShowEndPicker(){
				this.endCalendarShow=true;
			},
			endCalendarConfirm(e){
				let selectedDate=new Date(e.value);
				let selectedStr=formatDateTime(selectedDate,"yyyy-MM-dd");
				this.queryParams.chargerEndDate=selectedStr;
				this.endCalendarShow=false;
			},
			execQuery(){
				if(!this.queryParams.chargerStartDate){
					uni.showToast({
						icon:'error',
						title:"请选择开始日期"
					});
					return false;
				}
				if(!this.queryParams.chargerEndDate){
					uni.showToast({
						icon:'error',
						title:"请选择结束日期"
					});
					return false;
				}
				let that=this;
				getPersonCheckOutStatis(this.queryParams).then(res=>{
					that.statisList=res.data;
					that.popupMenuShow=false;
				});
				
			},
			resetQuery(){
				this.queryParams={
					chargerStartDate:undefined,
					chargerEndDate:undefined,
					userOnly:"TRUE"
				},
				this.statisList=[];
			}
			
		}
	}
</script>

<style>
</style>